<template>
	<view class="outer_box">
		<view class="shop-title-box">
			<view class="shop-info">
				<view class="">
					<image :src="shopInfo.shopLogo" mode=""></image>
				</view>
				<view class="shop-title">
					<view class="">{{shopInfo.shopName}}</view>
					<view class="">{{shopInfo.shopLabel}}</view>
				</view>
			</view>

		</view>
		<view class="type-box">
			<view :class="activate==0?'activate':'no-activate'" @tap='changeTap(0)'>全部商品</view>
			<view :class="activate==1?'activate':'no-activate'" @tap='changeTap(1)'>店铺详情</view>

		</view>
		<!-- 商品页面 -->
		<view class="product-box" v-if='activate==0'>
			<!-- 滚动区域 -->
			<view class="scroll-panel" id="scroll-panel">
				<view class="list-box">
					<view class="left">
						<scroll-view scroll-y="true" :style="{ 'height':height + 'px' }"
							:scroll-into-view="leftIntoView">
							<view class="item" v-for="(item,index) in list" :key="index"
								:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
								@tap="leftTap">{{item.classifyName}}</view>
						</scroll-view>
					</view>
					<view class="main">
						<scroll-view scroll-y="true" :style="{ 'height':height+ 'px' }" @scroll="mainScroll"
							:scroll-into-view="scrollInto" scroll-with-animation="true">
							<view class="item main-item " v-for="(item,index) in list" :key="index"
								:id="'item-'+index" >
								<view class="title-class">
									<view>{{item.classifyName}}</view>
								</view>
								<view class="goods box d-jc-c d-ai-c"  v-for="(data,index2) in item.data" :key="index2">
									<image :src="data.logo" mode=""></image>
									<view class="box-c">
										<view class="mb-3">
											<text class="class-title">{{data.name}}</text>
										</view>
										<view class="weight">
											
										</view>
										<view class="box d-ac-sb">
											<view class="price">
												<text class="">￥{{data.price}}</text>
											</view>
											<number :num="data" v-show="data.number>0"></number>
											<view class="cart-btn" @tap="addSubtractProduct(1,data,index2)" v-show="data.number==0">
												加入购物车
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- <cp-goods-select :height="height+'px'" :props="{label:'classifyName',value:'value',children:'data'}"
				:options="list1" @category-change="handelCategoryChange">
				<cp-goods-select-goods customClass="cloumn-1" @scrolltolower="handelScrolltolower">
					<template v-slot="{scope}">
						<view class="cp-goods-select-goods__item">
							<productInfo :productInfo='scope' class="product-info">
								<view slot='sku' class="sku">1000g{{scope.id}}</view>
								<view class="number" slot='number-btn'>
									x1
								</view>
								<view slot='price' class="price">￥{{scope.price}}</view>
							</productInfo>

						</view>
					</template>
				</cp-goods-select-goods>
			</cp-goods-select> -->
			<view class="tabber-box" style="z-index: 999;"  v-if="popUpFlag">
				<view class="tabber">
					<view class="" @click="openCart">
						<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/gwl2.png" mode=""></image>
						<view class="dot" v-if='cartNumber>0'>
							<text>{{totalNumber}}</text>
						</view>
					</view>
					<view class="">已免运费</view>
					<view class="">
						<view class="">合计:￥</view>
						<view class="">{{(totalPrice/100).toFixed(2)}}</view>
					</view>
					<view class="" @tap="affirmOrder()">
						<text>提交订单</text>
					</view>

				</view>

			</view>
			<view class="tabber-box" style="z-index: 999;"  v-if="!popUpFlag">
				<view class="tabber">
					<view class="">
						<image src="../../static/gwl1@2x.png" mode=""></image>
					</view>
					<view class="">已免运费</view>
					<view class="">
						<view class="" style="color: #999999;">合计:￥</view>
						<view class="" style="color: #999999;">0.00</view>
					</view>
					<view class="" style="background: #CCCCCC;color: #FFFFFF;">
						<text>提交订单</text>
					</view>
			
				</view>
			
			</view>

		</view>
		<!-- 店铺详情 -->
 	<view class="shop-info-box" v-if='activate==1' :style="{height:height2+'px'}">
 			<view class="shop-base-info">
 				<view class="shop-title-key">基本信息</view>
 				<view class="shop-key">
 					<view class="">店铺名称</view>
 					<view class="">{{shopInfo.shopName}}</view>
 				</view>
 				<view class="shop-key">
					<view class="">开店时间</view>
 					<view class="">{{shopInfo.createTime | dateFormatYear}}</view>
 				</view>
 				<view class="shop-key">
 					<view class="">运费说明</view>
 					<view class="">满80元免运费</view>
 				</view>
 				<view class="shop-key">
 					<view class="">资质证明</view>
 					<view class="">
 						<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode=""></image>
 					</view>
 				</view>
 			</view>

 		</view>
 		<view class="cart-box" v-if="cartActivate" style="animation-duration: 300ms" @tap="hide">
 			<view class="cart-card" @click.stop="none()">
				<!-- <view class="" @tap="hide">
					*
				</view> -->
 				<view class="cart-card-v">
 					<view class="cart-title">
 						<view class="">已选商品</view>
 						<view class="" @tap='clearCart'>
 							<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qk@2x.png" mode=""></image>
 							清空购物车
 						</view>
 					</view>
 					<view class="cart-product">
 						<scroll-view scroll-y="true" :style="{maxHeight:height3+'px'}">
							<view class="" v-for="(item,index) in popUpList" :key="index">
								<productInfo class="productInfo" :productInfo='popUpList[index]'>
									<number slot='number-btn' :num="item"></number>
									<view slot='sku' class="sku"></view>
								</productInfo>
							</view>
 							
 						</scroll-view>
 					</view>

				</view>


 			</view>
 		</view>
		<wybpopup ref="popup" type='bottom'>
			<view class="popup">
				<view class="popup_top item">
					<view class="">
						相伴测试专用商家
					</view>
					<view class="">
						￥ {{(totalPrice/100).toFixed(2)}}
					</view>
				</view>
				<view class="popup_top">
					<view class="">
						支付方式
					</view>
					<view class="">
						会员余额：{{userInfo.userInfo.money}}
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="popup_pay">
					<!-- <view class="pay_c"> -->
						<view class="">
							需付款
						</view>
						<view class="">
							￥{{(totalPrice/100).toFixed(2)}}
						</view>
					<!-- </view> -->
				</view>
				<button class="paymentBtn" type="default" @tap='payment1()'>
					支付
				</button>
			</view>
		
		</wybpopup>


	</view>
 </template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				shopInfo:'',
				parameter:{
					ids:[]
				},
				popUpFlag: false,
				popUpList:[],
				list: [],
				current: 0,
				flag: true,
				loading: true,
				scrollHeight: 0,
				scrollTopSize: 0,
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				leftArray: [],
				mainArray: [],
				topArr: [],
				leftIndex: 0,
				scrollInto: '',
				windows_height: '',
				num: 1,
				element: [],
				shopId:'',
				productInfo:{
					title:'进口苹果',
					image:'https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/login/logo.png',
					sku:'1000g',
					price:'30'
				},
				activate: 0,
				height1: 500,
				height: 500,
				height2: 500,
				height3: 500,
				cartNumber: 1, //购物车商品数量小于等于0 去除数量圆点
				cartActivate: false,
				totalPrice:'',
				totalNumber:''
			}
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? (this.leftIndex-3):0}`;
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(400)
					this.height2 = res.windowHeight - uni.upx2px(300)
					this.height3 = res.windowHeight - uni.upx2px(600)
					this.height1 = res.windowHeight - uni.upx2px(200)
				}
			})
		},
		mounted() {
			/* 等待DOM挂载完成 */
			this.$nextTick(() => {
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(() => {
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(() => {
						/* 获取列表数据，你的代码从此处开始 */
						this.getListData();
					})
				}, 100);
			})
		
		},
		onLoad(option) {
			this.shopId = option.shopId
			this.shopInf()
			// this.getProductList()
		},
		onShow() {
			console.log(this.loginState)
			if(this.loginState){
				this.pupUpList()
			}
			this.getProductList()
			this.getUserInfo()
			
		},
		computed: mapState(['userInfo','loginState']),
		methods: {	
			...mapMutations(['login', 'logout','setUserInfo']),
			shopInf(){
				this.$api.shopInfo({
					shopId:this.shopId
				}).then((res) => {
					this.shopInfo = res.data.data
					this.shopInfo.createTime = this.renderTime(this.shopInfo.createTime)
					console.log(res)
				})
			},
			// 时间转换
			renderTime(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/,
					'')
			},
			// 获取用户信息
			getUserInfo() {
				this.$api_http.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo.uid != null) {
						this.setUserInfo(userInfo)
					}else{
						this.logout()
					}
			
				})
			
			},
			payment1(){
				let type=3
				let parameter = {
					ids: [],
					isDispatching: this.popUpList2[0].isDispatching,
				}
				for (var i = 0; i < this.popUpList.length; i++) {
					parameter.ids.push(this.popUpList[i].goodsId)
							
				}
				this.$api.subOrder(parameter).then((res) => {
					// uni.hideLoading()
					if (res.data.code == 200) {
						//订单提交成功 开始支付
						const parameter = {
							"orderNo": res.data.data.orderNumber
						}
						this.payOrder(parameter,type)
					}
				})
			},
			payOrder(parameter,type) {
				parameter.type=type
				this.$api.payOrder(parameter).then((res) => {
					this.price = 0
					if(type==3){ //余额支付
						if (res.data.code == 200) {
							uni.showToast({
								title: '支付成功',
								duration: 1000,
								icon: "none"
							});
							setTimeout(function() {
								uni.navigateTo({
									url: '../order/paysuccess'
								});
							}, 1200);	
							this.close1()
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: "none"
							});
							setTimeout(function() {
								uni.navigateTo({
									url: '../pay/pay',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});	
							}, 1000);
						}
					}
			
				})
			
			},
			open1() {
				this.$refs.popup.show()
			},
			close1() {
				this.$refs.popup.hide()
			},
			affirmOrder() {
				if(this.userInfo.userInfo.flag == 3){//是会员
					this.isDispatching = this.popUpList2[0].isDispatching
					for (var i = 0; i < this.popUpList.length; i++) {
						this.parameter.ids.push(this.popUpList[i].goodsId)				
					}
					if (this.isDispatching == 2) {
							uni.navigateTo({
								url: '../order/affirmOrder?shopId=' + this.shopId+'&goodsIds='+JSON.stringify(this.parameter.ids)+'&type='+2
							});
						} else {
							this.open1()
								
					}
				}else if(this.userInfo.userInfo.flag == 1){//未开通会员
					uni.showModal({
							title: '提示',
							content: '您现在还未开通会员，请前往开通会员',
							success: (res)=> {
							if (res.confirm) {
								uni.navigateTo({
									url:'../member/openMember'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
								}
						 }
					});
				}else if(this.userInfo.userInfo.flag == 2){//会员过期
					uni.showModal({
							title: '提示',
							content: '会员已过期，请前往充值',
							success: (res)=> {
							if (res.confirm) {
								uni.navigateTo({
									url:'../member/toUp'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
								}
						 }
					});
				}

			
			},
			hide(){
				this.cartActivate = false
			},
			//清空购物车
			clearCart() {
				let _this = this
				this.$api.clearCart({
					shopId: this.shopId
				}).then((res) => {
					if (res.data.code == 200) {
						this.getProductList()
						this.pupUpList()
						setTimeout(function() {
							_this.cartActivate = false
							_this.popUpFlag = false
						}, 150);
					}
					console.log("=====" + JSON.stringify(JSON.stringify(res)))
			
				})
			
			},
			//列表价格数量计算
			calculate(){
				let totalPrice = 0
				let totalNumber = 0
				for (var i = 0; i < this.list.length; i++) {
					for (var j = 0; j < this.list[i].data.length; j++) {
						totalPrice+= this.list[i].data[j].price*this.list[i].data[j].number *100
						totalNumber+= this.list[i].data[j].number
					}
				}
				this.totalPrice = totalPrice
				this.totalNumber = totalNumber
				if(this.totalNumber>0){
					this.cartActive = true
				}else{
					this.cartActive = false
				}
				console.log("总价格："+totalPrice)
				console.log("总数量："+totalNumber)
				if(totalNumber<=0){
					this.popUpFlag = false
				}else{
					this.popUpFlag = true
				}
			},
			//根据id增加数量
			calculateNumberById(goodsId,number){
				for (var i = 0; i < this.list.length; i++) {
					for (var j = 0; j < this.list[i].data.length; j++) {
						if(this.list[i].data[j].goodsId==goodsId){
							this.list[i].data[j].number+=number
							if(this.list[i].data[j].number<0){
								this.list[i].data[j].number=0
							}
						}
					}
				}
				
			},
			//获取购物车列表
			pupUpList() {
				this.$api.getCartList({
					shopId: this.shopId
				}).then((res) => {
					if(res.data.data.length>0){
						this.popUpList = res.data.data[0].data
						this.popUpList2 = res.data.data
						console.log("=====77777777777" + this.popUpList)
					}else{
						this.popUpList=[]
						this.popUpFlag=false
						
					}
				
			
				})
			},
			//购物车添加
			 async addSubtractProduct(status, product, index) { //goodsId
				 await this.$api.addSubtractProduct({
					goodsId: product.goodsId,
					status: status
				}).then((res) => {
					if (res.data.success) {
						this.getProductList()
						this.calculateNumberById(product.goodsId,status)
					    //刷新购物车
						this.pupUpList()
						
					}else{
						if(res.data.code !=20001 || res.data.code != 20002){
							uni.showToast({
								title: res.data.message,
								duration: 1000,
								icon: "none"
							});
						}
						// uni.showToast({
						// 	title: res.data.msg,
						// 	duration: 1000,
						// 	icon: "none"
						// });	
					}
			
				})
			
			},
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height-180;
						console.log('5555555555'+this.scrollHeight)
						this.$nextTick(() => {
							resolve();
						})
					}).exec();
				});
			},
			/* 获取列表数据 */
						getListData() {
							// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
							this.$nextTick(() => {
								this.getElementTop();
							});
						},
						/* 获取元素顶部信息 */
						getElementTop() {
							new Promise((resolve, reject) => {
								let view = uni.createSelectorQuery().selectAll('.main-item');
								view.boundingClientRect(data => {
									resolve(data);
								}).exec();
							}).then((res) => {
								let topArr = res.map((item) => {
									return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
								});
								this.topArr = topArr;
			
								/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
								let last = res[res.length - 1].height;
								if (last - 0 < this.scrollHeight) {
									this.fillHeight = this.scrollHeight - last + 0;
								}
							});
						},
						/* 主区域滚动监听 */
						mainScroll(e) {
							let top = e.detail.scrollTop;
							let index = 0;
							/* 查找当前滚动距离 */
							for (let i = (this.topArr.length - 1); i >= 0; i--) {
								/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
								if ((top + 2) >= this.topArr[i]) {
									index = i;
									break;
								}
							}
							// debugger
							this.leftIndex = (index < 0 ? 0 : index);
						},
						/* 左侧导航点击 */
						leftTap(e) {
							// debugger
							// this.leftIndex = e.currentTarget.dataset.index
							let index = e.currentTarget.dataset.index;
							this.scrollInto = `item-${index}`;
						},
			getProductList(){
				this.$api.getProductList({
					shopId: this.shopId,
					// shopId:4
				}).then((res) => {
					this.list = res.data.data
					console.log("==========="+this.list)
					this.getListData();
					this.calculate()
					
				})
			},
			none() {

			},
			openCart() {
				this.cartActivate = true
				this.pupUpList()
				// if (this.cartActive==false) {
				// 	uni.showToast({
				// 		title: '购物车还没有任何东西！',
				// 		duration: 1500,
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// this.popUpFlag = !this.popUpFlag
				// if(this.popUpFlag){
				// 	this.pupUpList()
				// }
			},
			changeTap(value) {
				this.activate = value
			},
			handelScrolltolower(e) {
				console.log('handelScrolltolower', e)
			},
			handelCategoryChange(e) {
				console.log('handelCategoryChange', e)
				let goods = [],
					j = 0;
				while (++j < 10) {
					goods.push({
						label: e.label + ': 商品' + j,
						value: j,
					})
				}
				this.goods = goods
			}

		}
	}
 </script>

 <style lang="less" scoped>
	 /deep/ .product-box-module{
		 width: 750rpx;
      }
	  .popup{
	  	width: 750rpx;
	  	height: 785rpx;
	  	background: #FFFFFF;
	  	border-radius: 40rpx 40rpx 0rpx 0rpx;
	  	overflow: hidden;
	  	z-index: 9999;
	  	.popup_top{
	  		width: 690rpx;
	  		height: 70rpx;
	  		margin: 0 auto;
	  		display: flex;
	  		justify-content: space-between;
	  		align-items: center;
	  		font-size: 32rpx;
	  		font-weight: 400;
	  		color: #666666;
	  	}
	  	.popup_pay{
	  		width: 750rpx;
	  		height: 300rpx;
	  		text-align: center;
	  		view:nth-child(1){
	  			margin-top: 100rpx;
	  			font-size: 32rpx;
	  			font-weight: 400;
	  			color: #666666;
	  		}
	  		view:nth-child(2){
	  			font-size: 56rpx;
	  			font-weight: 400;
	  			color: #FF8308;
	  		}
	  	}
	  	.item{
	  		margin-top: 30rpx;
	  	}
	  	.line{
	  		width: 670rpx;
	  		height: 2rpx;
	  		background: #EEEEEE;
	  		border-radius: 1rpx;
	  		margin-top: 30rpx;
	  	}
	  	.paymentBtn{
	  		background-color: #FF8308 ;
	  		width: 520rpx;
	  		height: 100rpx;
	  		line-height: 100rpx;
	  		text-align: center;
	  		font-size: 32rpx;
	  		font-weight: 500;
	  		color: #FFFFFF;
	  		border-radius: 45rpx;
	  	}
	  }
	 .box-c{
		 width: 400rpx;
	 }
	 .price{
		 margin-top: 15rpx;
	 }
	 .price>text{
		 font-size: 36rpx;
		 font-weight: bold;
		 color: #FF8308;
	 }
	 .cart-btn {
	 	width: 190rpx;
	 	height: 60rpx;
	 	background-color: #FFBD66 !important;
	 	border-radius: 30rpx;
	 	color: #FFFFFF;
	 	text-align: center;
	 	line-height: 60rpx;
	 }
	 .weight{
		 font-size: 24rpx;
		 font-weight: 400;
		 color: #999999;
	 }
	 .box{
		 display: flex;
		 align-items: center;
	 }
	 .d-ac-sb{
		 justify-content: space-between;
	 }
	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;
	
		.left {
			width: 180rpx;
			background-color: #e6e6e6;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 32rpx;
	
			.item {
				text-align: center;
				position: relative;
				padding: 20rpx 0;
	
				&:not(:first-child) {
					margin-top: 1px;
	
					&::after {
						content: '';
						display: block;
						height: 0;
						width: 600upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}
	
				&.active {
					color: #FF5551;
					background-color: #fff;
					border-left: #FF5551 solid 4rpx;
					font-weight: 600;
				}
			}
	
			.fill-last {
				height: 0;
				width: 100%;
				background: none;
			}
		}
	
		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;
	
	
	
			.title-class {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 19;
			}
	
			.item {
				padding-bottom: 10rpx;
				border-bottom: #eee solid 1px;
			}
	
			.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-bottom: 30rpx;
	
	
				&>image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
	
			}
		}
	}
	@keyframes fadelogIn {
		0% {
			-webkit-transform: translate3d(0, 100%, 0);
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			opacity: 0.1;
		}

		100% {
			-webkit-transform: none;
			transform: none;
		}
	}

	@-webkit-keyframes fadelogIn {
		0% {
			-webkit-transform: translate3d(20, 100%, 50);
		}

		100% {
			-webkit-transform: none;
		}
	}

	.outer_box {
		display: flex;
		flex-direction: column;

		.cart-box {
			display: flex;
			flex-direction: column;
			position: absolute;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.3);
			bottom: 110rpx;
			z-index: 100;

			.cart-card {
				position: relative;
				display: flex;
				animation: fadelogIn .4s;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				min-height: 300rpx;
				width: 100%;
				background-color: #fff;
				position: absolute;
				bottom: 0rpx;

				.cart-card-v {
					margin: 0 auto;
					width: 92%;
					margin-top: 30rpx;
					.cart-product{
						.productInfo {
							display: flex;
							justify-content: flex-end;
							margin-top: 20rpx;
							.sku{
								color: #999999;
								font-size: 24rpx;
							}
							.price {
								font-size: 36rpx;
								font-weight: bold;
								color: #FF8308;
							}
						}
					}
					
					
					.cart-title{
						display: flex;
						justify-content: space-between;
						padding: 10rpx 0;
				
						view:nth-child(1){
							color: #333333;
							font-size: 32rpx;
						}
						view:nth-child(2){
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
					}

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}


			}
		}

		.shop-info-box {
			height: 500rpx;
			background-color: #F8F8F8;

			.shop-base-info {
				padding: 20rpx 30rpx;
				background-color: #fff;

				.shop-title-key {
					font-size: 32rpx;
					font-weight: 400;
					color: #999999;
				}

				.shop-key {
					display: flex;
					margin-top: 30rpx;
					align-items: center;

					image {
						width: 12rpx;
						height: 22rpx;
					}

					view:nth-child(1) {
						flex: 1;
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					view:nth-child(2) {
						text-align: end;
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
					}

				}

			}

		}



		.product-box {
			.activate-gray {
				-webkit-filter: grayscale(1);
				filter: #ccc;
				filter: grayscale(1);
			}

			.tabber-box {
				padding: 10rpx 20rpx;
				.tabber {
					width: 100%;
					height: 100rpx;
					background: #FFFFFF;
					box-shadow: 0px 0px 20rpx 0px rgba(255, 131, 8, 0.12);
					border-radius: 50rpx;
					display: flex;

					view:nth-child(1) {
						z-index: 9999;
						display: flex;
						align-items: center;
						flex: 2;
						position: relative;

						.dot {
							position: absolute;
							width: 36rpx;
							height: 36rpx;
							background-color: #FF5F3F;
							color: #fff;
							border-radius: 50%;
							top: 12rpx;
							right: 2rpx;
							line-height: 36rpx;
							display: flex;
							justify-content: center;

							text {}
						}

					}

					view:nth-child(2) {
						display: flex;
						flex: 3;
						align-items: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;

					}

					view:nth-child(3) {
						display: flex;
						flex: 6;
						align-items: center;

						view:nth-child(1) {
							font-weight: 400;
							color: #000000;
						}

						view:nth-child(2) {
							font-size: 36rpx;
							font-weight: bold;
							color: #FF8308;
						}

					}

					view:nth-child(4) {
						display: flex;
						flex: 3;
						align-items: center;
						justify-content: center;
						background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
						border-radius: 0px 50rpx 50rpx 0px;
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;

					}

					image {
						margin-left: 30rpx;
						width: 56rpx;
						height: 56rpx;

					}

				}

			}

			.product-info {
				.sku {
					color: #999999;
					font-size: 24rpx;
				}

				.price {
					font-size: 36rpx;
					font-weight: bold;
					color: #FF8308;
				}
			}
		}

		.type-box {
			display: flex;
			text-align: center;

			.activate {
				border-bottom: 4rpx #FFBF69 solid;
				color: #FF8308 !important;
			}

			.no-activate {
				border-bottom: 2rpx #eee solid;
			}

			view:nth-child(1) {
				flex: 1;
				padding: 20rpx 0;

			}

			view:nth-child(2) {
				flex: 1;
				padding: 20rpx 0;
			}
		}

		.shop-title-box {
			background: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/bj.jpg);
			width: 100%;
			background-size: 100%;
			height: 200rpx;

			.shop-info {
				// background-color: #007AFF;
				padding: 30rpx;
				display: flex;

				.shop-title {
					margin-left: 20rpx;

					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
					}

					view:nth-child(2) {
						margin-top: 20rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
					}
				}
			}

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

		}
	}
</style>
